<template>
  <a-spin :spinning="fullScreenLoading">
    <a-layout>
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <router-link to="/" :class="['logo', 'pc', theme]">
          <img src="static/img/logo.png" alt="logo"/>
          <h1 class="logo-title" v-if="!collapsed">统一支付平台</h1>
        </router-link>
        <div class="menu">
          <a-menu
            mode="inline"
            :default-selected-keys="['/home']"
            :open-keys.sync="openKeys"
            theme="dark"
            @select="menuSelected"
            :inlineCollapsed="true"
            v-model="selectedKeys"
          >
            <template v-for="i in menuData">
              <template v-if="i.hasChildren">
                <a-sub-menu :key="i.path">
                  <span slot="title" v-if="i.icon"><a-icon :type="i.icon" /><span>{{ i.name }}</span></span>
                  <template v-if="i.hasChildren">
                    <template v-for="child in i.children">
                      <template v-if="child.hasChildren">
                        <a-sub-menu :key="child.path">
                          <span slot="title"><a-icon :type="child.icon" v-if="child.icon"/><span>{{ child.name }}</span></span>
                          <a-menu-item v-for="thirdChild in child.children" :key="thirdChild.path">{{ thirdChild.name }}</a-menu-item>
                        </a-sub-menu>
                      </template>
                      <template v-else>
                        <a-menu-item :key="child.path">{{ child.name }}</a-menu-item>
                      </template>
                    </template>
                  </template>
                </a-sub-menu>
              </template>
              <template v-else>
                <a-menu-item :key="i.path">
                  <a-icon :type="i.icon" />
                  <span>{{ i.name }}</span>
                </a-menu-item>
              </template>
            </template>
          </a-menu>
        </div>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :class="[theme, 'global-header']">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="menu-toggle" @click="toggleCollapse" />
          <div :class="['global-header-right', theme]">
            <header-avatar class="header-item"/>
          </div>
        </a-layout-header>
        <a-layout-content style="margin: 10px 0 0 0;min-height: calc(100vh - 58px);">
          <slot></slot>
          <a-layout-footer class="copyright">
            <global-footer :copyright="copyright"/>
          </a-layout-footer>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-spin>
</template>

<script>
import GlobalFooter from './GlobalFooter'
import Setting from "~/setting/Setting";
import SiderMenu from "~/menu/SiderMenu";
import Drawer from "~/tool/Drawer";
import GlobalHeader from "@/views/common/GlobalHeader";
import HeaderAvatar from './HeaderAvatar'

import {mapMutations, mapState} from "vuex";
import {triggerWindowResizeEvent} from "@/utils/common";

const minHeight = window.innerHeight - 64 - 24 - 66

let menuData = []
export default {
  name: "Layout",
  components: {Setting, SiderMenu, Drawer, GlobalFooter, GlobalHeader, HeaderAvatar},
  data() {
    return {
      minHeight: minHeight + 'px',
      collapsed: false,
      menuData: menuData,
      openKeys: ['/home'],
      cachedOpenKeys: [],
      selectedKeys: ['/home'],
    }
  },
  watch: {
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    '$route': function () {
      this.setMenuActiveKey();
    }
  },
  computed: {
    paddingLeft() {
      return this.fixSiderbar && this.layout === 'side' && !this.isMobile ? `${this.sidebarOpened ? 256 : 80}px` : '0'
    },
    ...mapState({
      sidebarOpened: state => state.setting.sidebar.opened,
      isMobile: state => state.setting.isMobile,
      theme: state => state.setting.theme,
      layout: state => state.setting.layout,
      copyright: state => state.setting.copyright,
      fixSiderbar: state => state.setting.fixSiderbar,
      fixHeader: state => state.setting.fixHeader,
      settingBar: state => state.setting.settingBar.opened,
      fullScreenLoading: state => state.setting.fullScreenLoading
    })
  },
  methods: {
    ...mapMutations({setSidebar: 'setting/setSidebar'}),
    toggleCollapse() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    onDrawerChange(show) {
      this.collapsed = show
    },
    onMenuSelect() {
      this.toggleCollapse()
    },
    menuSelected(menu){
      this.$router.push(menu.key)
    },
    setMenuActiveKey() {
      let routes = this.$route.matched.concat()
      if (routes.length >= 4 && this.$route.meta.hidden) {
        routes.pop()
        this.selectedKeys = [routes[2].path]
      } else {
        this.selectedKeys = [routes.pop().path]
      }

      let openKeys = []
      routes.forEach((item) => {
        openKeys.push(item.path)
      })

      this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
    }
  },
  beforeCreate() {
    let routers = this.$db.get('USER_ROUTER')
    menuData = routers.find((item) => item.path === '/').children.filter((menu) => {
      let meta = menu.meta
      if (typeof meta.isShow === 'undefined') {
        return true
      } else return meta.isShow
    })
  },
  mounted () {
    this.setMenuActiveKey()
  }

}
</script>



<style scoped lang="scss">
.logo {
  cursor: pointer;
  font-size: 20px;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 64px;
  overflow: hidden;

  img {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
    width: 32px;
  }
  .logo-title{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin: 0 0 0 10px;
    white-space: nowrap;
  }
}
.global-header {
  padding: 0 12px 0 0;
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  position: relative;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .menu-toggle{
    padding: 10px;
    font-size: 20px;
  }

  &.light {
    background: #fff;
  }

  &.dark {
    background: #393e46;
  }

  .global-header-right {
    float: right;

    &.dark {
      color: #fff;

      i {
        color: #fff;
      }
    }
  }
}
</style>
